<template>
    <view class="main">
        <view class="content">
            <view class="top">
                <view class="dispaly-line-center">
                    <view class="one-cate dispaly-center">
                        <view class="one-cate-item" v-for="(item, index) in cateList" :key="index"
                            @click="clickCateItem(item, index)">
                            <view class="cate-bg">
                                <image src="/static/mine/qza.png" mode="aspectFill" v-if="index == current" />
                                <image src="/static/mine/qzac.png" mode="aspectFill" v-else />
                                <view class="txt dispaly-align-center">{{ item.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-list" :style="{ marginTop: cateHeight + 'px' }">
                <view class="order-item" v-for="(item, index) in 10" :key="index">
                    <view class="user dispaly-just-between" v-if="current == 1 || current == 2">
                        <view class="infos dispaly-center">
                            <view class="avatar ">
                                <image
                                    src=""
                                    mode="aspectFill" />
                                <image class="q" src="/static/icon/q.png" mode="aspectFill" />
                            </view>
                            <view class="name">刘海柱</view>
                        </view>
                        <view class="money">ID3344</view>
                    </view>

                    <view class="product dispaly-center">
                        <view class="cover-box ">
                            <view class="cover-bg">
                                <image class="bg" src="/static/icon/order-cover.png" mode="aspectFill" />
                            </view>
                            <image
                                src=""
                                mode="aspectFill" class="cover-img" />
                        </view>
                        <view class="desc ">
                            <view class="pro-name">代取快递</view>
                            <view class="pro-price">9999.00</view>
                        </view>
                    </view>

                    <view class="info" v-if="current == 1 || current == 2">
                        <view class="info-item dispaly-center">
                            <view class="info-left">QQ</view>
                            <view class="info-right dispaly-just-between">
                                <view class="info-con">123456789</view>
                                <view class="info-btn">
                                    <image src="/static/icon/btn.png" mode="aspectFill" />
                                </view>
                            </view>
                        </view>
                        <view class="info-item dispaly-center">
                            <view class="info-left">微信</view>
                            <view class="info-right dispaly-just-between">
                                <view class="info-con">123456789</view>
                                <view class="info-btn">
                                    <image src="/static/icon/btn.png" mode="aspectFill" />
                                </view>
                            </view>
                        </view>
                        <view class="info-item dispaly-center">
                            <view class="info-left" style="border-bottom: none">电话</view>
                            <view class="info-right dispaly-just-between" style="border-bottom: none">
                                <view class="info-con">123456789</view>
                                <view class="info-btn">
                                    <image src="/static/icon/btn.png" mode="aspectFill" />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="btn-box" v-if="current == 0 || current == 1">
                        <view class="item-box dispaly-just-between">
                            <view class="item">
                                <view class="b-txt dispaly-align-center">取消</view>
                                <image src="/static/mine/q.png" mode="aspectFill" />
                            </view>
                            <view class="item">
                                <view class="b-txt dispaly-align-center" style="color: #FFD257 ">修改</view>
                                <image src="/static/mine/w.png" mode="aspectFill" />
                            </view>
                        </view>
                    </view>
                    <view class="ok dispaly-center" v-if="current == 2">
                        <view class="time-txt dispaly-align-center">完成时间</view>
                        <view class="time">04-14 13:00</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getElementHeight } from '@/utils/util'

const cateList = ref([
    { name: '发布中', id: 1 },
    { name: '交易中', id: 2 },
    { name: '已完成', id: 3 },
])

const current = ref(0)
const clickCateItem = (item, index) => {
    current.value = index
}

const takeConfirm = () => {
    uni.navigateTo({
        url: `/subPackage/index/takeDetail`
    })
}

// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
    const res = await getElementHeight('.top')
    cateHeight.value = res
})

</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;

.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #ffbf0f;

    .one-cate {
        .one-cate-item {
            .cate-bg {
                width: 235rpx;
                height: 82rpx;
                position: relative;

                image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    width: 235rpx;
                    height: 82rpx;
                }

                .txt {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    width: 235rpx;
                    height: 82rpx;
                    font-family: IPix;
                    font-size: 30rpx;
                    color: #4E3B0C;
                }
            }
        }
    }
}


.order-list {
    padding: 30rpx;

    .order-item:last-child {
        margin-bottom: 0;
    }

    .order-item {
        margin-bottom: 28rpx;
        border: 6rpx solid #4e3b0c;
        padding: 24rpx;
        background-color: #ffd257;

        .name {
            font-family: IPix;
            font-size: 28rpx;
            color: #000000;
            margin: 30rpx 0 15rpx 0;
        }

        .product {
            padding: 15rpx;
            background: #ffbf0f;
            margin-top: 23rpx;
            border: 4rpx solid #54400f;

            .desc {
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .pro-price {
                    font-family: IPix;
                    font-size: 24rpx;
                    color: #000000;
                    padding-bottom: 25rpx;
                }

                .pro-name {
                    font-family: IPix;
                    font-size: 28rpx;
                    padding-top: 25rpx;
                    color: #000000;
                }
            }

            .cover-box {
                margin-right: 23rpx;
                width: 150rpx;
                height: 150rpx;
                position: relative;

                .cover-bg {
                    width: 150rpx;
                    height: 150rpx;

                    image {
                        width: 150rpx;
                        height: 150rpx;
                    }
                }

                .cover-img {
                    position: absolute;
                    top: 4rpx;
                    left: 4rpx;
                    right: 0;
                    width: 144rpx;
                    height: 144rpx;
                }
            }
        }

        .user {
            .infos {
                .avatar {
                    margin-right: 20rpx;
                    border: 1rpx solid #FFFFFF;
                    border-radius: 50%;
                    width: 74rpx;
                    height: 74rpx;
                    position: relative;

                    .q {
                        width: 74rpx;
                        height: 74rpx;
                    }

                    image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        width: 74rpx;
                        height: 74rpx;
                        border-radius: 50%;
                    }
                }

                .name {
                    font-family: IPix;
                    font-size: 22rpx;
                    color: #000000;
                }
            }

            .money {
                font-family: IPix;
                font-size: 32rpx;
                color: #000000;
            }
        }


        .info {
            border: 4rpx solid #54400f;
            margin-top: 16rpx;

            .info-item {
                .info-left:last-child {
                    border-bottom: none;
                }

                .info-left {
                    border-right: 4rpx solid #54400f;
                    border-bottom: 4rpx solid #54400f;
                    padding-left: 16rpx;
                    flex: 2;
                    background: #e6bd4e;
                    font-family: IPix;
                    font-size: 28rpx;
                    color: #000000;
                    height: 84rpx;
                    line-height: 84rpx;
                }

                .info-right {
                    border-bottom: 4rpx solid #54400f;
                    padding: 0 19rpx;
                    flex: 4;
                    height: 84rpx;
                    background: #ffd257;
                    line-height: 84rpx;

                    .info-con {
                        font-family: IPix;
                        font-size: 28rpx;
                        color: #000000;
                    }

                    .info-btn {
                        height: 68rpx;

                        image {
                            width: 78rpx;
                            height: 68rpx;
                        }
                    }
                }
            }
        }

        .ok {
            margin-top: 20rpx;

            .time-txt {
                width: 140rpx;
                height: 70rpx;
                background-color: #f5c245;
                border: 2rpx solid #4b3c16;
                font-family: IPix;
                font-size: 28rpx;
                color: #000000;
                margin-right: 30rpx;
            }

            .time {
                font-family: IPix;
                font-size: 23rpx;
                color: #000000;
            }
        }
    }
}

.btn-box {
    width: 100%;
    margin-top: 20rpx;

    .item-box {
        .item {
            position: relative;
            width: 304rpx;
            height: 82rpx;
            z-index: 99;

            image {
                position: absolute;
                z-index: -1;
                left: 0;
                right: 0;
                top: 0;
                width: 304rpx;
                height: 82rpx;
            }

            .b-txt {
                font-family: IPix;
                font-size: 36rpx;
                color: #000000;
                width: 304rpx;
                height: 82rpx;
            }
        }
    }
}
</style>